<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="include :: header"></head>

<link href="/css/layui.css" rel="stylesheet"></html>
<style>
    .previwe{
        margin-left: 5%;
        margin-top: 15px;
    }
    .previwe-button{
        margin-top: 15px;
        text-align:center;
    }
</style>
<body>
<!--<div class="col-auto">
    <ul id="imgList" class="titleTab" th:if="${scenicpictureArr != false}" th:value="${farmRoom.roomPhotos}" th:each="scenicpic:${scenicpictureArr}">
        <li th:attr="data-id=${scenicpic}">
            <img style="width:60px;height:60px;" th:src="${scenicpic}" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="btn btn-warning btn-sm ' + s_remove_h + '" href="#" title="删除图片"><i class="fa fa-remove"></i></span>
        </li>
    </ul>
</div>-->
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div th:if="${scenicpictureArr != false}" th:each="scenicpic:${scenicpictureArr}"><img style="width: 100%;height: 100%" th:src="${scenicpic}" /></div>
    </div>
</div>
<div class="previwe">
    <h1 style="font-size: 20px;font-weight:bold"  th:text="${farmShop.farmName}"></h1>
</div>
<div class="previwe">
    <h1 class="fa fa-map-marker">
        &nbsp;&nbsp;
        <span th:text="${farmShop.address}"></span></h1>
</div>
<div class="previwe">
    <h1  class="fa fa-phone">
        &nbsp;&nbsp;
        <span th:text="${farmShop.phone}"></span></h1>
</div>
<div class="previwe">
    <h1   class="fa fa-clock-o">
        &nbsp;&nbsp;
        <span th:text="${farmShop.openTime}"></span></h1>
</div>
<div class="previwe">
    <h1   class="fa fa-clock-o">
        &nbsp;&nbsp;
        <span th:text="${farmShop.businessLicens}"></span></h1>
        <h1>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span th:text="${farmShop.consumption}"></span></h1>
    <br/>
</div>
<div class="previwe-button">
    <button class="layui-btn layui-btn-radius layui-btn-normal" onclick="farm_Room()">住宿</button><button class="layui-btn layui-btn-radius layui-btn-normal" onclick="farm_Dish()">美食</button>
</div>
<ul id="farm-Room" style="height:300px;overflow-y:auto">
    <li class="previwe" th:if="${farmRoomDOList != false}" th:each="farmRoom:${farmRoomDOList}">
        <img style="width: 60px;height:60px;" th:src="${farmRoom.roomPhotos}" />
        <div style="float: right;margin-right: 5%">
            <h1 class="fa fa-jpy"  style="margin-top: 7px;font-size: 16px;color: red" th:text="${farmRoom.specialPrice}"></h1>
           <!-- <h1 style="margin-top: 7px;font-size: 7%;" th:text="${farmRoom.rackPrice}"></h1>-->
            <h1   style="margin-top: 7px; text-decoration:line-through ;font-size: 7%; margin-left: -30%" >
                门市价:
                <span style="text-decoration:line-through" class="fa fa-jpy" th:text="${farmRoom.rackPrice}"></span></h1>
        </div>
        <div style="float: right;margin-right: 40%;">
            <h1 style="margin-top: 5px;font-size: 14px; font-weight:bold" th:text="${farmRoom.roomName}"></h1>
            <h1 style="margin-top: 5px;" th:text="${farmRoom.bedType}"></h1>
            <h1 style="margin-top: 5px" th:text="${farmRoom.roomType}"></h1>
        </div>
    </li>
</ul>

<ul id="farm-Dish" style="height:300px;overflow-y:auto">
    <li class="previwe" th:if="${farmDishDOList != false}" th:each="farmDish:${farmDishDOList}">
        <img style="width: 60px;height:60px;" th:src="${farmDish.dishPhotos}" />
        <div style="float: right;margin-right: 5%">
            <h1 class="fa fa-jpy"  style="margin-top: 7px;font-size: 16px;color: red" th:text="${farmDish.specialPrice}"></h1>
            <!-- <h1 style="margin-top: 7px;font-size: 7%;" th:text="${farmRoom.rackPrice}"></h1>-->
            <h1   style="margin-top: 7px; text-decoration:line-through ;font-size: 7%; margin-left: -30%" >
                门市价:
                <span style="text-decoration:line-through" class="fa fa-jpy" th:text="${farmDish.rackPrice}"></span></h1>
        </div>
        <div style="float: right;margin-right: 40%;">
            <h1 style="margin-top: 5px;font-size: 14px; font-weight:bold" th:text="${farmDish.dishName}"></h1>
            <h1 style="margin-top: 5px;" th:text="${farmDish.dishDescribe}"></h1>
           <!-- <h1 style="margin-top: 5px":
                th:text="${farmDish.hotValue}"></h1>-->
            <h1   style="margin-top: 5px; " >
                销量:
                <span  th:text="${farmDish.hotValue}"></span></h1>
        </div>
    </li>
</ul>


<!--<div class="form-group" style="margin-top: 20px">
    <label class="col-sm-3 control-label">商铺名称：&nbsp;&nbsp;<p style="float: right" th:text="${farmShop.dishName}"></p></label>
    <label class="col-sm-3 control-label" style="margin-left: 20%">菜品分类：&nbsp;&nbsp;<p style="float: right" th:text="${farmShop.type}"></p></label>
</div>
<div class="form-group" style="margin-top: 100px">
    <label class="col-sm-3 control-label">菜品价格:<p style="float: right" th:text="${farmShop.rackPrice}"></p></label>
    <label class="col-sm-3 control-label" style="margin-left: 20%">优惠价格:<p style="float: right" th:text="${farmShop.specialPrice}"></p></label>
</div>-->
<!-- 条目中可以是任意内容，如：<img src=""> -->
<div th:include="include::footer"></div>
<script src="/js/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: '30%'
            // ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,interval: 5000
        });
    });
    $(function () {
        $('#farm-Dish').hide();
    })
    function farm_Room() {
        $('#farm-Room').show();
        $('#farm-Dish').hide();
    }
    function farm_Dish() {
        $('#farm-Room').hide();
        $('#farm-Dish').show();
    }
</script>
</body>
</html>